<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>人事管理系统</title>
    <base th:href="${#httpServletRequest.getContextPath()} + '/'">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="layui/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="layui/layui.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header layui-bg-green">
        <div class="layui-logo" style="font-weight: bold;font-style: italic;font-size: 20px;color: #404040"><i
                class="layui-icon layui-icon-template" style="font-size: 20px;color: #404040"></i><a
                href="" style="color: #404040">人事管理系统</a>
        </div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right" style="padding-right: 0">
            <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-time"> </i><span id="time"></span></a>
            </li>
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="user/do/logout"><i class="layui-icon layui-icon-logout"
                                            style="font-size: 20px;font-weight: bold;color: red"></i>&nbsp;&nbsp;退出登录</a>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a>
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test" id="leftNav">
                <li style="text-align: center"><img
                        src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                        class="layui-nav-img" style="height: 120px;width: 120px;margin:10px 0 10px 0"
                        alt="">
                    <p style="text-align: center;font-size: 20px">
                        欢迎，[[${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}]]</p>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <div class="layui-bg-green" style="text-align: center;margin-top: 10px">
                        <p style="font-size: 20px">学校人事信息管理</p>
                    </div>
                </li>
                <li class="layui-nav-item">
                    <a><i class="layui-icon layui-icon-username" style="font-size: 20px"></i>&nbsp;&nbsp;用户管理</a>
                    <dl class="layui-nav-child">
                        <dd data-type="tabAdd" lay-id="添加用户" lay-href="user/add/page.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-addition"
                                style="font-size: 20px"></i>&nbsp;&nbsp;添加用户</a></dd>
                        <dd data-type="tabAdd" lay-id="查询用户" lay-href="include/user-list.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-search"
                                style="font-size: 20px"></i>&nbsp;&nbsp;查询用户</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a><i class="layui-icon layui-icon-group" style="font-size: 16px"></i>&nbsp;&nbsp;部门管理</a>
                    <dl class="layui-nav-child">
                        <dd data-type="tabAdd" lay-id="添加部门" lay-href="dept/add/page.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-addition"
                                style="font-size: 20px"></i>&nbsp;&nbsp;添加部门</a></dd>
                        <dd data-type="tabAdd" lay-id="查询部门" lay-href="include/dept-list.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-search"
                                style="font-size: 20px"></i>&nbsp;&nbsp;查询部门</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a><i class="layui-icon layui-icon-chat" style="font-size: 20px"></i>&nbsp;&nbsp;职位管理</a>
                    <dl class="layui-nav-child">
                        <dd data-type="tabAdd" lay-id="添加职位" lay-href="job/add/page.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-addition"
                                style="font-size: 20px"></i>&nbsp;&nbsp;添加职位</a></dd>
                        <dd data-type="tabAdd" lay-id="查询职位" lay-href="include/job-list.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-search"
                                style="font-size: 20px"></i>&nbsp;&nbsp;查询职位</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a><i class="layui-icon layui-icon-friends" style="font-size: 20px"></i>&nbsp;&nbsp;员工管理</a>
                    <dl class="layui-nav-child">
                        <dd data-type="tabAdd" lay-id="添加员工" lay-href="employee/add/page.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-addition"
                                style="font-size: 20px"></i>&nbsp;&nbsp;添加员工</a></dd>
                        <dd data-type="tabAdd" lay-id="查询员工" lay-href="include/employee-list.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-search"
                                style="font-size: 20px"></i>&nbsp;&nbsp;查询员工</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a><i class="layui-icon layui-icon-star" style="font-size: 20px"></i>&nbsp;&nbsp;角色管理</a>
                    <dl class="layui-nav-child">
                        <dd data-type="tabAdd" lay-id="添加角色" lay-href="role/add/page.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-addition"
                                style="font-size: 20px"></i>&nbsp;&nbsp;添加角色</a></dd>
                        <dd data-type="tabAdd" lay-id="查询角色" lay-href="include/role-list.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-search"
                                style="font-size: 20px"></i>&nbsp;&nbsp;查询角色</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a><i class="layui-icon layui-icon-file" style="font-size: 20px"></i>&nbsp;&nbsp;文件管理</a>
                    <dl class="layui-nav-child">
                        <dd data-type="tabAdd" lay-id="下载文件" lay-href="include/file-upload.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-upload-circle"
                                style="font-size: 17px"></i>&nbsp;&nbsp;上传文件</a></dd>
                        <dd data-type="tabAdd" lay-id="下载文件" lay-href="include/file-list.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-download-circle"
                                style="font-size: 21px"></i>&nbsp;&nbsp;下载文件</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a><i class="layui-icon layui-icon-speaker" style="font-size: 20px"></i>&nbsp;&nbsp;公告管理</a>
                    <dl class="layui-nav-child">
                        <dd data-type="tabAdd" lay-id="发布公告" lay-href="notice/add/page.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-edit"
                                style="font-size: 17px"></i>&nbsp;&nbsp;发布公告</a></dd>
                        <dd data-type="tabAdd" lay-id="查看公告" lay-href="include/notice-list.html"><a id="checkNotices">&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-layer"
                                style="font-size: 21px"></i>&nbsp;&nbsp;查看公告</a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div class="layui-tab layui-tab-brief" lay-filter="tabBrief" lay-allowclose="true"
             style="height:89%;width:100%;margin-bottom:0">
            <ul class="layui-tab-title">
                <li class="layui-this">欢迎页面</li>
            </ul>
            <div class="layui-tab-content" style="height:100%;width:97%;padding: 15px">
                <div class="layui-tab-item layui-show">
                    <iframe src="welcome/page.html" style="border: none" height="100%" width="100%"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer" style="text-align: center">
        <!-- 底部固定区域 -->
        <p>@2021-@2100 五邑大学 2018级 智能制造学部
        <p>
    </div>
</div>
</body>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function () {
        const element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;

        //时间更新
        getTime();
        setInterval(function () {
            getTime();
        }, 1000);

        function getTime() {
            const d = new Date();
            const M = d.getMonth() < 9 ? ('0' + (d.getMonth() + 1)) : (d.getMonth() + 1);
            const D = d.getDate() < 10 ? ('0' + d.getDate()) : d.getDate();
            const h = d.getHours() < 10 ? ('0' + d.getHours()) : d.getHours();
            const m = d.getMinutes() < 10 ? ('0' + d.getMinutes()) : d.getMinutes();
            const s = d.getSeconds() < 10 ? ('0' + d.getSeconds()) : d.getSeconds();
            document.getElementById("time").innerHTML = d.getFullYear() + '年' + M + '月' + D + '日&nbsp;&nbsp;&nbsp;&nbsp;' + h + ':' + m + ':' + s
                + '&nbsp;&nbsp;星期' + '日一二三四五六'.charAt(d.getDay());
        }

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            , menuRight: function () {
                layer.open({
                    title: "五邑大学简介"
                    , type: 1
                    , content:
                        '<div style="padding: 15px;">' +
                        '<div style="text-align: center"><img src="images/wyu.png" alt="五邑大学校徽" width="90%" height="90%"></div>' +
                        '<p style="font-size: 16px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;五邑大学坐落于广东省江门市，是一所以工科为主的多科性大学，为广东省高水平理工科大学建设高校，CDIO工程教育联盟成员单位。五邑大学由广东省人民政府于1985年设立。1990年成为学士学位授予单位。1996年成为本科教学合格单位。1998年成为硕士学位授予单位。2008年本科教学工作水平评估被评为优秀等级。截至2020年9月，学校校园占地面积1000余亩，总建筑面积近70万平方米；设有17个教学机构，81个本科专业（方向），拥有7个一级硕士学位授权点、3个独立二级硕士学位授权点和工程硕士、教育硕士两个类别共5个专业硕士授权领域；拥有在职教职工1100余人，其中专任教师近1000人，各类在籍学生2.4万余人，其中全日制本科生2万余人，研究生近800人。</p>' +
                        '</div>'
                    , area: ['260px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                });
            }
        });

        //触发事件
        const active = {
            tabAdd: function () {
                // 新增一个Tab项
                element.tabAdd('tabBrief', {
                    title: window.tabName
                    , content: window.iframeContent
                    , id: window.iframeSrc
                });
            }, tabChange: function () {
                element.tabChange('tabBrief', iframeSrc);
            }
        };

        $('#leftNav dd').on('click', function () {
            const othis = $(this);
            let isRepeat = false;
            window.iframeSrc = othis.attr('lay-href'); // 获取iframe的src
            window.tabName = othis.text();
            $(".layui-tab-title li").each(function (k, val) {
                const layId = $(val).attr("lay-id");
                if (layId === window.iframeSrc) {  // 如果已开启
                    $(val).addClass("layui-this").siblings().removeClass("layui-this");
                    active.tabChange();
                    isRepeat = true;
                    return false;
                }
            })
            if (iframeSrc && !isRepeat) {
                window.iframeContent = '<iframe src="' + iframeSrc + '" frameborder="0" height="100%" width="100%"></iframe>'
                active.tabAdd.call(this, othis);
                active.tabChange();
            }
        });
    });
</script>
</html>